<template>
  <div>
    <div class="contract-header" v-if="!contractData">
      暂未添加合同信息 <span @click="eidtDetail()">录入合同</span>
    </div>
    <div class="contract-body" v-else>
      <div class="contract-box">
        <el-row class="mb20">
          <el-col :span="18">
            <div class="contract-info-to">
              <h3>
                {{ projectDetail ? projectDetail.name : '' }}
                <div class="user-btn-status">
                  <span class="btn-user-r el-icon-edit-outline" @click="eidtDetail()">编辑</span>
                </div>
              </h3>
              <!--              <p class="contract-info-to-p">-->
              <!--                <span class="left-lable">签约客户</span> {{projectDetail?projectDetail.name:''}}-->
              <!--              </p>-->
              <!--              <p>-->
              <!--                <span class="left-lable">签约方</span> -->
              <!--              </p>-->
            </div>
          </el-col>
          <el-col :span="6">
            <div class="contract-status">
              <p>合同状态</p>
              <p>执行中</p>
            </div>
          </el-col>
        </el-row>
        <el-row class="mt10">
          <div class="contract-p">
            <el-col :span="4">
              <div class="contract-line">
                <p>合同总金额</p>
                <p class="price-contract">￥{{ contractData ? contractData.money : '0.00' }}</p>
                <p class="price-small-contract">待收款:{{ contractData ? contractData.money : '0.00' }}</p>
                <!--                壹佰壹拾捌万捌仟元整-->
              </div>
            </el-col>
            <el-col :span="11">
              <div class="progress-contrtact">
                <el-progress :percentage="10" :stroke-width="12" :color="customColors"></el-progress>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="contract-line">
                <p>签约执勤点(个)</p>
                <p class="price-contract">{{ Pointtotal }}</p>
              </div>

            </el-col>
            <el-col :span="3">
              <div class="contract-line">
                <p>需签保安(人)</p>
                <p class="price-contract">{{ teamNumber }}</p>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="contract-line">
                <p>已签保安(人)</p>
                <p class="price-contract">{{ numberAdd }}</p>
              </div>
            </el-col>
          </div>
        </el-row>
      </div>
      <div class="divider-line mt20"></div>
      <div class="contract-tabs">
        <el-tabs v-model="activeName">
          <el-tab-pane label="合同信息" name="info"></el-tab-pane>
          <el-tab-pane label="发票" name="invoice"></el-tab-pane>
        </el-tabs>
        <div class="contract-tabs-info" v-if="activeName=='info'">
          <div class="contract-tabs-info-header mb20">
            <div class="contract-tabs-info-header-l">
              <span>签约客户</span>
              {{ projectDetail ? projectDetail.name : '' }}
            </div>
            <div class="contract-tabs-info-header-l">
              <span>合同总金额</span>
              ￥{{ projectDetail ? projectDetail.contractMoney : '0.00' }}
            </div>
          </div>
          <div class="contract-tabs-info-a mb20">
            <div class="contract-tabs-info-title mb10">
              基础信息
            </div>
            <!--            <div class="contract-tabs-info-list mb10">-->
            <!--              <span class="contract-tabs-info-list-title">-->
            <!--                合同编号-->
            <!--              </span>-->
            <!--              KHHT-20240227-001-->
            <!--            </div>-->
            <div class="contract-tabs-info-list">
              <span class="contract-tabs-info-list-title">
                合同起止日期
              </span>
              {{ contractData ? contractData.startTime : '--' }} 至{{ contractData ? contractData.endTime : '--' }}
            </div>
          </div>
          <div class="divider-line mt20"></div>
          <div class="contract-tabs-info-a mt20">
            <div class="contract-tabs-info-title">
              签约双方
            </div>
            <div class="contract-tabs-info-log mt10 mb10">
              <div class="contract-tabs-info-log-title">
                我放信息
              </div>
              <div class="contract-tabs-info-log-l">
                <div class="contract-tabs-info-log-l-l mb10">
                  <span>
                    我方负责人
                  </span>
                  {{userData?userData.nickName:''}} {{userData?userData.phonenumber:''}}
                </div>
                <div class="contract-tabs-info-log-l-l">
                  <span>
                    我方签约人
                  </span>
                  {{userData?userData.nickName:''}} {{userData?userData.phonenumber:''}}
                </div>
              </div>
            </div>
            <div class="contract-tabs-info-log mb20">
              <div class="contract-tabs-info-log-title">
                签约客户
              </div>
              <div class="contract-tabs-info-log-l">
                <div class="contract-tabs-info-log-l-l mb10">
                  <span>
                    签约客户
                  </span>
                  {{ projectDetail ? projectDetail.name : '' }}
                </div>
                <div class="contract-tabs-info-log-l-l">
                  <span>
                   合同金额
                  </span>
                  ￥{{ contractData ? contractData.money : '0.00' }}
                </div>
              </div>
            </div>
          </div>
          <div class="contract-tabs-info-a">
            <div class="contract-tabs-info-title">
              签约驻点
            </div>
            <div class="contract-tabs-info-log mt10 mb20" v-for="(item, index) in pointList" :key="index">
              <div class="contract-tabs-info-log-title">
                驻点{{ index + 1 }}
              </div>
              <div class="contract-tabs-info-log-l">
                <div class="contract-tabs-info-log-l-l mb10">
                  <span>
                    驻点
                  </span>
                  {{ item.name }}
                </div>
                <div class="contract-tabs-info-log-l-l">
                  <span>
                    保安人数
                  </span>
                  {{ item.number }}人
                </div>
              </div>
            </div>
          </div>
        </div>
        <invoice :paramId="contractIds" :projectData="projectDetail" :contractData="contractData" :projectId="projectId" v-else/>
<!--        paramId-->
      </div>
    </div>
    <!--    执勤点编辑-->
    <contractDetail :visible.sync="detailVisible" :contractId="contractIds" :param="param" @getList="getList"
                    @getContract="getContract" :projectData="projectDetail"></contractDetail>
  </div>
</template>

<script>
import {contractlist, getContract} from "@/api/system/contract";
import {getCustom} from '@/api/system/custom.js'
import detail from "../detail";
import contractDetail from "./contractDetail";
import invoice from "./invoice";
import {listStagnationPoint} from "@/api/system/stagnation_point";
import {
  getProject
} from "@/api/system/project";
import project from "../../cost/components/project";

export default {
  name: "infoPoint",
  components: {detail, contractDetail, invoice},
  dicts: ['sys_stagnation_type', 'sys_post_nature', 'sys_purchase_type', 'sys_deposit_type', 'sys_deposit_status'],
  props: ['paramId', 'type', 'contractId'],
  data() {
    return {
      detailVisible: false,
      projectType: {},
      userData: null,
      compayData: null,
      param: null,
      contractData: null,
      loading: true,
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      activeName: 'info',
      projectDetail: null,
      Pointtotal: 0,
      teamNumber: 0,
      numberAdd: 0,
      pointList: [],
      contractIds: 0,
      projectData: null,
      projectId: 0
    }
  },
  watch: {
  },
  created() {
    // 获取当前的合同信息，用的列表
    // projectDetail 从项目详情进入的
    if(this.type=='projectDetail'){
      // contractId
      this.contractIds = this.contractId
    }else{
      this.contractIds = this.$route.params && this.$route.params.contractId;
      // projectDetail 从合同列表进入的
    }
    if(this.contractIds){
      this.getContract()
    }
  },
  methods: {
    getContract() {
      getContract(this.contractIds).then(response => {
        console.log('contractData:', response)
        this.contractData = response.data.detail
        let teamNumber = 0
        for (let item of response.data.project.projectPostList) {
          teamNumber = teamNumber + (item.number || 0)
        }
        this.teamNumber = teamNumber
        this.projectDetail = response.data.project
        this.projectId = response.data.project.id
        this.userData = response.data.user
        this.getPintList()
      });
    },
    // 获取当前项目的执勤点
    /** 查询定位器列表 */
    getPintList() {
      this.loading = true;
      listStagnationPoint({
        pageNum: 1,
        pageSize: 50,
        projectId: this.projectDetail.ids
      }).then(response => {
        let number_ = 0
        for(let item of response.rows){
          number_ = number_ + item.number
        }
        this.numberAdd = number_
        this.pointList = response.rows
        this.Pointtotal = response.total;
      });
    },
    eidtDetail() {
      // this.param = JSON.parse(JSON.stringify(this.projectDetail))
      this.detailVisible = true
    },
    closePoint() {
      this.$message.error('暂未开放')
    },
    getList() {
      this.$emit('getPointFn')
    },
    editPoint() {
      this.zhudianVisible = true
    },
    // 客户详情
    getUserDetail() {
      getCustom(this.projectData.customId).then(res => {
        this.userData = {
          id: Number(res.data.id),
          name: res.data.name
        }
      })
    },
    // // 公司详情
    // getCompanyDetail() {
    //   getDept(this.projectData.companyId).then(res => {
    //     this.compayData = {
    //       deptId: res.data.deptId,
    //       deptName: res.data.deptName
    //     }
    //   })
    // },
  }
}
</script>

<style scoped>
p {
  margin: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.info-top {
  display: flex;
  align-items: center;
}

.info-top h2 {
  font-size: 16px;
  flex: 1;
}

.contract-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  font-size: 12px;
}

.contract-header span {
  margin-left: 10px;
  color: #36a3f7;
  cursor: pointer;
}

.contract-header span:hover {
  text-decoration: underline;
}

.contract-tabs-info-header {
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  background-color: #f9f9fb;
  display: flex;
  padding: 10px;
  font-size: 14px;
}

.contract-tabs-info-header-l {
  flex: 1;
}

.contract-tabs-info-header-l span {
  color: #999;
}

.contract-info-to p.contract-info-to-p {
  margin-bottom: 10px;
}

.contract-info-to h3 {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
}

.left-lable {
  color: #999;
  display: block;
  width: 80px;
}

.contract-p {
  background: linear-gradient(123deg, rgba(239, 61, 5, .05), rgba(255, 206, 17, .07));
  border-top: 1px dashed rgba(0, 0, 0, .1);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 20px;
  overflow: hidden;
}

.price-contract {
  font-weight: bold;
  font-size: 18px;
}

.progress-contrtact {
  padding-top: 30px;
}

.contract-line {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.contract-line p:first-child {
  color: #999;
}

.divider-line {
  background: #f5f5f5;
  height: 5px;
  width: 100%;
}

.contract-tabs-info-a {
  font-size: 14px;
}

.contract-tabs-info-title {
  font-weight: bold;
}

.contract-tabs-info-list {
  display: flex;
}

.contract-tabs-info-list-title {
  display: block;
  width: 90px;
  color: #999;
}

.contract-tabs-info-log {
  border: 1px solid #409EFF;
  border-radius: 5px;
  overflow: hidden;
}

.contract-tabs-info-log-title {
  background: #c0e1ff;
  padding: 10px;
}

.contract-tabs-info-log-l {
  padding: 10px;
}

.contract-tabs-info-log-l-l {
  display: flex;
}

.contract-tabs-info-log-l-l span {
  display: block;
  width: 80px;
  color: #999;
}

.user-btn-status {
  border: 1px solid #ddd;
  font-size: 12px;
  display: flex;
  align-items: center;
  border-radius: 15px;
  overflow: hidden;
  width: 100px;
  margin-left: 10px;
}

.user-btn-status span {
  cursor: pointer;
  padding: 0 20px;
  height: 30px;
  display: block;
  line-height: 30px;
  text-align: center;
  flex: 1;
}


.user-btn-status span:hover {
  background: #f8f8f8;
}

.contract-status p {
  text-align: right;
  display: block;
  padding-right: 20px;
}

.contract-status p:first-child {
  color: #999;
}

.contract-status p:last-child {
  font-weight: bold;
  font-size: 16px;
}

.price-small-contract {
  color: #999;
}
</style>
